<template>
  <view class="container_collection">
    <!-- 收藏 列表 -->
    <view class="allGoods" v-if="type === 'GOODS'">
      <Goods v-for="(item, index) in goodsList" :key="index" :item="item" :goodsId="item.skuId">
        <checkbox
          v-model="item.checked"
          :checked="item.checked"
          style="padding-top: 80rpx; width: 40rpx"
          @click="changeChekced(item)"
          :status="true"
        />
      </Goods>
    </view>

    <view class="allVideo" v-if="type === 'VIDEO'">
      <view
        v-for="(item, index) in goodsList"
        :key="index"
        class="item"
        @click="clickVideoItem(item)"
      >
        <view class="images">
          <image :src="item.cover" mode="scaleToFill"></image>
        </view>
        <view class="content">
          <view class="name">{{ item.title }}</view>
          <view class="update">{{ update(item.releaseTime) }}</view>
          <view class="sc">
            <view>
              <text>时长：{{ item.duration ? item.duration : '' }}</text>
              <text>|</text>
            </view>
            <view> {{ item.viewCount }}人观看</view>
          </view>
        </view>
      </view>
    </view>

    <view style="height: 134rpx; background: #f9f9f9"></view>

    <view class="del" v-if="type === 'GOODS'">
      <label> <checkbox v-model="checked" :checked="checked" @click="selectAll" /> 全选 </label>
      <button
        :style="selectGoodsList.length ? 'background: #EF231B;' : 'background: #bdbdbd;'"
        size="mini"
        @click="clickCancel"
      >
        取消收藏
      </button>
    </view>

    <CartsIcon></CartsIcon>
  </view>
</template>

<script>
import { collectionList, cancelCollection } from '@/api/personalCenter/index.js'
import { addToCart } from '@/api/home/index'
import Goods from '@/components/goods/goods.vue'
import CartsIcon from '@/components/home/cartsIcon.vue'

export default {
  components: { Goods, CartsIcon },
  data() {
    return {
      checked: false,
      pageNumber: 1,
      pageSize: 30,
      goodsList: [],
      selectGoodsList: [],
      type: ''
    }
  },
  onLoad(e) {
    this.type = e.type
  },
  onShow() {
    this.getList()
  },
  // 监听触底
  onReachBottom() {
    if (this.pages > this.params.pageNumber) {
      this.params.pageNumber++
      this.getData()
    }
  },
  methods: {
    clickVideoItem(val) {
      uni.navigateTo({ url: '/pages/video/play?id=' + val.id })
    },
    update(val) {
      let a = new Date(val).getTime()
      let b = new Date().getTime()
      // 天
      let c = parseInt((b - a) / 1000 / 60 / 60 / 24)
      if (c < 31) {
        return c + '天前更新'
      }
      if (365 > c && c > 31) {
        return parseInt(c / 30) + '月前更新'
      }
      if (c > 365) {
        return parseInt(c / 365) + '年前更新'
      }
    },
    getList() {
      // GOODS VIDEO
      collectionList(this.type, { pageNumber: this.pageNumber, pageSize: this.pageSize }).then(
        res => {
          if (res.code === 200) {
            res.data.records.forEach(item => {
              this.$set(item, 'checked', false)
            })
            this.goodsList = res.data.records
          }
        }
      )
    },
    clickCancel() {
      if (!this.goodsList.length) {
        return
      }
      if (!this.selectGoodsList.length) {
        uni.showToast({ icon: 'none', title: '请选中商品', mask: true })
        return
      }
      let ids = ''
      this.goodsList.forEach(item => {
        if (item.checked) {
          ids = ids + item.skuId + ','
        }
      })
      cancelCollection(this.type, ids).then(res => {
        if (res.code === 200) {
          this.getList()
        }
      })
    },
    changeChekced(val) {
      val.checked = !val.checked
      this.selectGoodsList = this.goodsList.filter(i => {
        return i.checked === true
      })
      if (this.selectGoodsList.length === this.goodsList.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
    selectAll() {
      this.checked = !this.checked
      if (this.checked === true) {
        this.goodsList.forEach(i => {
          i.checked = true
        })
      } else {
        this.goodsList.forEach(i => {
          i.checked = false
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container_collection {
  width: 100%;
  min-height: 100vh;
  background: #f9f9f9;
}

.allGoods {
  background: #f9f9f9;
  padding-top: 25rpx;
}
.allVideo {
  margin: 0 25rpx;
  padding-top: 25rpx;
  .item {
    display: flex;
    flex-flow: row nowrap;
    // align-items: center;
    width: 100%;
    margin-bottom: 30rpx;
  }
  .images {
    margin-left: 21.53rpx;
    margin-right: 24.31rpx;
    image {
      width: 194rpx;
      height: 144rpx;
      border-radius: 11rpx;
    }
  }
  .content {
    width: 100%;
    .name {
      font-size: 29rpx;
      font-weight: 400;
      margin-bottom: 30.53rpx;
    }
    .update {
      font-size: 25rpx;
      color: #8d8d8d;
    }
    .sc {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15rpx;
      view {
        display: inline-block;
        font-size: 25rpx;
        color: #8d8d8d;
        text:nth-child(1) {
          padding-right: 50rpx;
        }
      }
    }
  }
}
.del {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 104rpx;
  background: #ffffff;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  label {
    height: auto;
    margin-left: 40rpx;
  }
  button {
    width: 243rpx;
    height: 83rpx;
    line-height: 83rpx;
    font-size: 33rpx;
    color: #ffffff;
    border-radius: 83rpx;
    margin: 0;
    margin-right: 34.72rpx;
    padding: 0;
  }
}
</style>
